<!--
  @Description:商品2.0-新品详情(橱柜/定制)
  @Author:zqy
  @Date:2021-11-27 10:50:00
  @Last Modified by:zqy
  @Last Modified time:2021-11-27 10:50:00
-->
<template>
  <Visible v-model="currentAnchor" :anchors="anchors">
    <div class="newpro-detail">
      <detail-header id="hidden" />
      <AnchorNav ref="anchorNav" v-model="currentAnchor" :anchors="anchors" />
      <SwipePlay v-model="currentIndex" preview :list="swipeList" :host="ADS_STATIC_PATH" />
      <Slide @left="leftHandle" @right="rightHandle">
        <div class="content">
          <div class="summary">
            <div class="product-name">{{ detail.seriesName }}</div>
            <div class="serise-name">门板工艺：{{ detail.doorPanelName || '--' }}</div>
          </div>
          <Card v-if="doorList.length" title="主门型(更多门型参照技术手册)" class="card-no-pd">
            <ScrollPicList
              v-if="doorList.length"
              :list="doorList"
              src-name="url"
              label-name="name"
              :host="ADS_STATIC_PATH"
              preview
            />
          </Card>
          <Card v-if="colorList.length" title="门板可选花色(颜色以色板为准)" class="card-no-pd">
            <ScrollPicList
              v-if="colorList.length"
              :list="colorList"
              src-name="url"
              label-name="name"
              :host="ADS_STATIC_PATH"
              preview
            />
          </Card>
          <Card id="descNewProduct" title="详情">
            <div class="detail-content" v-html="detail.detailExplain" />
          </Card>
          <Card id="recommendNewProduct" class="desc-item" title="新品方案">
            <Recommend
              v-if="recommendList.length"
              :list="recommendList"
              :host="ADS_STATIC_PATH"
              :column="2"
              @click="clickRecommendHandle"
            />
            <div v-else style="text-align:center;">暂无</div>
          </Card>
        </div>
      </Slide>
    </div>
  </Visible>
</template>
<script>
import Visible from '@/components/Visible'
import { getById } from '@/apis/productCenter2.0'
import SwipePlay from '@/components/SwipePlay'
import AnchorNav from '@/components/AnchorNav'
import Slide from '@/components/Slide'
import Recommend from '../components/Recommend'
import ScrollPicList from '../components/ScrollPicList'
import Card from '@/components/Card'
export default {
  name: 'NewProductDetail',
  components: {
    Visible,
    Card,
    ScrollPicList,
    SwipePlay,
    AnchorNav,
    Slide,
    Recommend
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      ADS_STATIC_PATH: `${process.env.VUE_APP_ADS_STATIC}`,
      // 导航
      currentAnchor: 'hidden',
      anchors: [
        { label: '详情', value: 'descNewProduct' },
        { label: '新品方案', value: 'recommendNewProduct' }
      ],
      detail: {},
      currentIndex: 0
    }
  },
  computed: {
    swipeList() {
      const list = (this.detail.mainPicList || []).map(e => {
        e.src = e.url
        e.type = 'image'
        return e
      })
      if (this.detail.video) {
        list.unshift({
          src: this.detail.video,
          poster: this.detail.videoPic || '',
          type: 'video'
        })
      }
      return list
    },
    recommendList() {
      return (this.detail.pcListDTOList || []).map(e => {
        e.type = 'image'
        e.src = e.coverSmallImageUrl || e.coverImageUrl
        e.label = e.programmeName
        return e
      })
    },
    // 门型
    doorList() {
      const list = (this.detail && this.detail.doorList) || []
      /* const list = [
        {
          id: '1212121',
          picUrl: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
          name: '全友家居挪威森林新式沙发'
        }
      ] */
      return list
    },
    // 花色列表
    colorList() {
      const list = (this.detail && this.detail.adsDecors) || []
      /* const list = [
        {
          id: '1212125',
          picUrl: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
          name: '全友家居挪威森林新式沙发4'
        }
      ] */
      return list
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取详情
    getDetail() {
      getById(this.id).then(res => {
        this.detail = res.data
      })
    },
    // 单击新品方案进入方案详情
    clickRecommendHandle(item) {
      this.$router.push({ name: 'SchemeDetail', params: { id: item.id }})
    },
    // 锚点切换
    // 获取下一个锚点
    getAnchor(left = true) {
      for (let i = 0; i < this.anchors.length; i++) {
        const a = this.anchors[i]
        if (a.value === this.currentAnchor) {
          if (left) {
            if (i + 1 > this.anchors.length - 1) {
              return this.anchors[0]
            } else {
              return this.anchors[i + 1]
            }
          } else {
            if (i - 1 < 0) {
              return this.anchors[this.anchors.length - 1]
            } else {
              return this.anchors[i - 1]
            }
          }
        }
      }
    },
    leftHandle() {
      // const a = this.getAnchor(true)
      // if (a) {
      //   this.$refs.anchorNav.clickHandle(a)
      // }
    },
    rightHandle() {
      // const a = this.getAnchor(false)
      // if (a) {
      //   this.$refs.anchorNav.clickHandle(a)
      // }
    }
  }
}
</script>
<style lang="less" scoped>
.newpro-detail{
  position: relative;
  .detail-box{
    padding: 0 !important;
    /deep/ .card-body{
      padding-top: 0;
    }
  }
  .detail-content{
    line-height: 1.3;
    font-size: 14px;
    /deep/ img{
      max-width: 100% !important;
    }
  }
  .card-no-pd{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0;
    background: #fff;
     /deep/ .header{
      margin-left: 16px;
    }
  }
  /deep/.swipe-play .wrap{
    height: 210px;
  }
}
.summary{
  padding: 15px;
  background: #fff;
  margin-bottom: 10px;
  .product-name{
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
    letter-spacing: 1px;
  }
  .serise-name{
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    letter-spacing: 1px;
  }
}

</style>
